<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
              <Form-item label="ID" prop="id">
                <Input type="text" v-model="searchForm.id" clearable placeholder="请输入ID" style="width: 200px"/>
              </Form-item>
              <Form-item label="跳转类型" prop="targetType">
                <Select v-model="searchForm.targetType" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="item in types" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
              </Form-item>
              <Form-item label="状态" prop="state">
                <Select v-model="searchForm.state" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="item in states" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
              </Form-item>
              <Form-item label="设备组" prop="deviceModelGroupid">
                <Select v-model="searchForm.deviceModelGroupid" placeholder="请选择" clearable style="width: 200px">
                  <Option v-for="item in deviceModelGroups" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
              </Form-item>
              <Form-item style="margin-left:-35px;">
                <Button @click="handleSearch" type="primary" icon="search">搜索</Button>
                <Button @click="handleReset" type="ghost">重置</Button>
              </Form-item>
            </Form>
          </Row>

          <Row class="margin-top-10 searchable-table-con1">
            <Table :loading="loading" border :columns="columns" :data="data"
                   ref="table"></Table>
          </Row>
          <Row type="flex" justify="end" class="code-row-bg page">
            <Page :current="this.searchForm.pageNumber" :total="total" :page-size="this.searchForm.pageSize"
                  @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50,100]"
                  size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'bannerList',
  data () {
    return {
      accessToken: {},
      loading: true,
      searchForm: {
        id: '',
        targetType: '',
        state: '',
        deviceModelGroupid: '',
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      data: [],
      states: [],
      deviceModelGroups: [],
      types: [],
      columns: [
        {
          title: 'BANNERID',
          key: 'id',
          width: 100
        },
        {
          title: '图片',
          key: 'icon',
          align: 'center',
          render: (h, params) => {
            return h('Avatar', {
              props: {
                src: params.row.icon
              }
            })
          }
        },
        {
          title: '目标URL',
          key: 'targetUrl'
        },
        {
          title: '位置',
          key: 'position',
          render: (h, params) => {
            let position = params.row.position
            if (position) {
              return h('div', position.desc)
            }
          }
        },
        {
          title: '状态',
          key: 'statename',
          render: (h, params) => {
            return h('div', params.row.statename.name)
          }
        },
        {
          title: '跳转类型',
          key: 'targetType',
          render: (h, params) => {
            return h('div', params.row.targetType.name)
          }
        },
        {
          title: '设备组',
          key: 'deviceModelGroup',
          render: (h, params) => {
            return h('div', params.row.deviceModelGroup.name)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            if (params.row.statename.id === 2100) {
              return h('div', [
                h('Button', {
                  props: {type: 'primary', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2200)
                    }
                  }
                }, '上线'),
                h('Button', {
                  props: {type: 'warning', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2300)
                    }
                  }
                }, '下线'),
                h('Button', {
                  props: {type: 'error', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2400)
                    }
                  }
                }, '停用'),
                h('Button', {
                  props: {type: 'info', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                }, '配置多语言')
              ])
            } else if (params.row.statename.id === 2200) {
              return h('div', [
                h('Button', {
                  props: {type: 'warning', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2300)
                    }
                  }
                }, '下线'),
                h('Button', {
                  props: {type: 'error', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2400)
                    }
                  }
                }, '停用'),
                h('Button', {
                  props: {type: 'info', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                }, '配置多语言')
              ])
            } else if (params.row.statename.id === 2300) {
              return h('div', [
                h('Button', {
                  props: {type: 'primary', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2200)
                    }
                  }
                }, '上线'),
                h('Button', {
                  props: {type: 'error', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2400)
                    }
                  }
                }, '停用'),
                h('Button', {
                  props: {type: 'info', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                }, '配置多语言')
              ])
            } else {
              return h('div', [
                h('Button', {
                  props: {type: 'primary', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2200)
                    }
                  }
                }, '上线'),
                h('Button', {
                  props: {type: 'warning', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.updateState(params.row.id, 2300)
                    }
                  }
                }, '下线'),
                h('Button', {
                  props: {type: 'info', size: 'small'},
                  style: {marginRight: '5px'},
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                }, '配置多语言')
              ])
            }
          }
        }
      ]
    }
  },
  methods: {
    init () {
      console.info('初始化============')
      // this.accessToken = {
      //   accessToken: getStore("accessToken")
      // };
      this.getBannerList()
    },
    updateState (bannerId, state) {
      let title = ''
      if (state === 2200) {
        title = '上线'
      } else if (state === 2300) {
        title = '下线'
      } else {
        title = '停用'
      }
      this.$Modal.confirm({
        title: '提示',
        content: '您确认要 ' + title + ' ?',
        onOk: () => {
          this.postRequest('/banner/audit', {id: bannerId, state: state}).then(res => {
            if (res.code === 200) {
              this.$Message.success('操作成功')
              this.init()
            }
          })
        }
      })
    },
    changePage (v) {
      this.searchForm.pageNumber = v
      this.getBannerList()
      this.clearSelectAll()
    },
    changePageSize (v) {
      this.searchForm.pageSize = v
      this.getBannerList()
    },
    selectDateRange (v) {
      if (v) {
        this.searchForm.startDate = v[0]
        this.searchForm.endDate = v[1]
      }
    },
    getBannerList () {
      // 多条件搜索用户列表
      this.loading = true
      this.getRequest('/banner/list/search', this.searchForm).then(res => {
        this.loading = false
        console.info(res)
        if (res.code === 200) {
          this.data = res.result.data
          this.total = res.result.count
        }
      })
    },
    handleSearch () {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.init()
    },
    handleReset () {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.init()
    },
    clearSelectAll () {
      this.$refs.table.selectAll(false)
    },
    getState () {
      this.getRequest('/base/state/list').then(res => {
        if (res.code === 200) {
          res.result.forEach((item) => {
            this.states.push({value: item.id, label: item.name})
          })
        }
      })
    },
    getDeviceModelGroups () {
      this.getRequest('/base/devicemodelgroup/list').then(res => {
        if (res.code === 200) {
          res.result.forEach((item) => {
            this.deviceModelGroups.push({value: item.id, label: item.name})
          })
        }
      })
    },
    getTypes () {
      this.getRequest('/base/type/list').then(res => {
        if (res.code === 200) {
          res.result.forEach((item) => {
            this.types.push({value: item.id, label: item.name})
          })
        }
      })
    }
  },
  mounted () {
    this.getState()
    this.getDeviceModelGroups()
    this.getTypes()
    this.init()
  }
}
</script>

<style scoped>

</style>
